<template>
    <div class="engine">
      <canvas v-show="canvasVisible" id="canvas" ref="canvasRef" class="canvas-box" oncontextmenu="event.preventDefault()"
        tabindex="1"></canvas>
  
      <el-progress type="circle" style="position: absolute" :percentage="percentageValue"
        v-show="showPercentage"></el-progress>
        <elemInfoDialog :visible="visible" :eleInfo="eleInfo.list" @closeDialog="closeDialog"></elemInfoDialog>
    </div>
  </template>
  <script lang="ts" setup>
  // import { ref, onMounted, onUnmounted } from "vue"
  import { closeUIPanel } from "@/utils/utils";
  import { getElementParamV3,getElementsByParamsPaging } from "@/http/api_hd"
  import { insertDashes } from "@/utils/utils";
  import elemInfoDialog from "./elemInfoDialog.vue";
  
  const props = defineProps({
    modelInfo: {
      type: Object,
      default: {}
    }
  })
  
  
  
  
  
  const canvasRef = ref<HTMLCanvasElement>();
  const percentageValue = ref<number>(0);
  const showPercentage = ref<boolean>(true);
  const canvasVisible = ref<boolean>(true);
  
  // const modelInfo = [{
  //   dataSetId: '3a1480cfe471435b110154a86707fb2c',
  //   resourcesAddress: 'https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a1480cfe471435b110154a86707fb2c'
  // }]
  // // 如果有登录框，这里需要根据自己需求调整接口
  
  
  // 初始化给BlackHole3D赋值
  function initEngine() {
    window.BlackHole3D = window.BlackHole3D ? window.BlackHole3D : {};
    window.BlackHole3D["canvas"] = canvasRef.value;
  
    if (typeof window.BlackHole3D.RealBIMWeb === "undefined") {
      window.BlackHole3D = window.CreateBlackHoleWebSDK(window.BlackHole3D);
    }
    window.BlackHole3D.m_re_em_window_width = window.innerWidth;
    window.BlackHole3D.m_re_em_window_height = window.innerHeight;
  }
  // 监听模型加载
  function addListener() {
    document.addEventListener("RESystemReady", RESystemReady); //系统初始化监听
    document.addEventListener("RESystemEngineCreated", (e) =>
      RESystemEngineCreated(e)
    ); //场景初始化监听
    document.addEventListener("REDataSetLoadProgress", (e) =>
      REDataSetLoadProgress(e)
    ); //模型加载进度监听
    window.addEventListener("resize", onResize);
  }
  
  function onResize() {
    window.BlackHole3D.m_re_em_window_width = window.innerWidth;
    window.BlackHole3D.m_re_em_window_height = window.innerHeight;
  }
  function RESystemReady() {
    var sysInfo = new window.BlackHole3D.RESysInfo();
    sysInfo.workerjsPath = "/js/RealBIMWeb_Worker.js";
    
    sysInfo.renderWidth = window.innerWidth;
    sysInfo.renderHieght = window.innerHeight;
    sysInfo.userName = "";
    sysInfo.passWord = "";
    window.BlackHole3D.initEngineSys(sysInfo);
    window.BlackHole3D.Common.setUseWebCache(true); //是否允许使用浏览器缓存
  }
  function RESystemEngineCreated(e: any) {
    const isSuccess = e.detail.succeed;
    if (isSuccess) {
      // window.BlackHole3D.Model.loadDataSet(modelInfo, true);
      window.BlackHole3D.Model.loadDataSet(props.modelInfo, true);
      window.BlackHole3D.Common.setMaxResMemMB(5500);
      window.BlackHole3D.Common.setExpectMaxInstMemMB(4500);
      window.BlackHole3D.Common.setExpectMaxInstDrawFaceNum(20000000);
      window.BlackHole3D.Common.setPageLoadLev(2);
    } else {
      console.log("===========================  场景初始化 --> 失败！！！");
    }
  }
  
  let emit = defineEmits(['finishProgress']);

  // 监听模型加载进度
  function REDataSetLoadProgress(e: any) {
    showPercentage.value = true;
    if (e.detail.progress === 100) {
      showPercentage.value = false;
      canvasVisible.value = true;
  
      //禁用天空盒
      window.BlackHole3D.SkyBox.setEnable(false);
      //设置天空盒背景色
      window.BlackHole3D.SkyBox.setBackClr(new window.BlackHole3D.REColor(4,24,35));
      window.BlackHole3D.Common.setShadowState(true);
      window.BlackHole3D.Common.setAOState(true);
      emit('finishProgress');
      // searchAttribute()///按属性搜索构件,并隐藏其他构件
      document.addEventListener("RESystemSelElement", RESystemSelElement);//开启点击事件监听
    } else {
      canvasVisible.value = false;
      showPercentage.value = true;
    }
    percentageValue.value = e.detail.progress;
    closeUIPanel();//隐藏UI(左上,右上,底部)
  
  }
  
  function removeListener() {
    document.removeEventListener("RESystemReady", RESystemReady); //系统初始化监听
    document.removeEventListener("RESystemEngineCreated", RESystemEngineCreated); //场景初始化监听
    document.removeEventListener("REDataSetLoadProgress", REDataSetLoadProgress); //模型加载进度监听
    
  }
  
  let eleInfo = reactive({
    list:[]
  })

  //监听点击事件
const RESystemSelElement = () => {
    var probeRet = window.BlackHole3D.Probe.getCurProbeRet();
    console.log('probeRet',probeRet);
    let data_setId = insertDashes(probeRet.dataSetId);
    let params = {
      dataSetId:data_setId,
      // dataSetId:"3a15c081-bf16-4232-db95-c3d4cc1cef74",
      elementIntId:probeRet.elemId,
      isQueryExtend:false
    }
    getElementParamV3(params).then((res: any) => {
      console.log('160',res);
      if(res && res.data && res.data.elementParamGroups && res.data.elementParamGroups.length>0){
        eleInfo.list = res.data.elementParamGroups;
        visible.value = true;
      }
     
    })
}

let visible = ref(false);

const closeDialog = ()=>{
  visible.value = false;
}

  onMounted(() => {
    addListener();
    initEngine();
  });
  onUnmounted(() => {
    window.BlackHole3D = undefined;
    removeListener();
  });
  </script>
  <style lang="scss" scoped>
  .engine {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>